<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>订单添加</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/resource/layui/css/layui.css"
	media="all">
<script type="text/javascript"
	src="<%=request.getContextPath()%>/resource/js/jquery-3.6.0.min.js"></script>

</head>
<body>

	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 20px;">
		<legend>订 单 添 加</legend>
	</fieldset>

	<form class="layui-form" action="">
		<label class="layui-form-label">订购客户</label>
		<div class="layui-form-item layui-input-inline">
			<select id="customerNameType" name="customerNameType"
				lay-filter="customerNameFilter">
				<option value="">请选择</option>
			</select>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">订购产品</label>
			<div class="layui-input-inline">
				<input type="text" name="orderProducts" lay-verify="orderProducts"
					autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">订购数量</label>
			<div class="layui-input-inline">
				<input type="text" name="orderQuantity" lay-verify="orderQuantity"
					autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">税前单价</label>
			<div class="layui-input-inline">
				<input type="text" name="unitPriceBeforeTax"
					lay-verify="unitPriceBeforeTax" autocomplete="off"
					class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">单位</label>
			<div class="layui-input-block">
				<input type="radio" name="unit" value="元" title="元 ￥" checked="">
				<input type="radio" name="unit" value="美元" title="美元 $">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">状态</label>
			<div class="layui-input-inline">
				<select id="state" name="state" lay-filter="state">
					<option value="未开始">未开始</option>
					<option value="已开始">已开始</option>
					<option value="已完成">已完成</option>
					<option value="订单取消">订单取消</option>
				</select>
			</div>
		</div>

		<div class="layui-form-item layui-inline">
			<label class="layui-form-label">订购日期</label>
			<div class="layui-input-inline">
				<input type="text" name="subscriptionDate" id="subscriptionDate"
					lay-verify="date" autocomplete="off" class="layui-input">
			</div>
		</div>
		
		<div class="layui-form-item layui-inline">
			<label class="layui-form-label">要求日期</label>
			<div class="layui-input-inline">
				<input type="text" name="requiredDate" id="requiredDate"
					lay-verify="date" autocomplete="off" class="layui-input">
			</div>
		</div>
		
		<div class="layui-form-item layui-form-text">
    		<label class="layui-form-label">订单要求</label>
    		<div class="layui-input-block">
      		<textarea placeholder="请输入内容" class="layui-textarea" name="orderRequirements"></textarea>
    		</div>
  		</div>
  		
  		<div class="layui-form-item layui-form-text">
    		<label class="layui-form-label">相关图片</label>
    		<div class="layui-input-block">
      		<textarea placeholder="请输入内容" class="layui-textarea" name="relatedPictures"></textarea>
    		</div>
  		</div>
  		
  		<div class="layui-form-item layui-form-text">
    		<label class="layui-form-label">订单附件</label>
    		<div class="layui-input-block">
      		<textarea placeholder="请输入内容" class="layui-textarea" name="orderAttachment"></textarea>
    		</div>
  		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button type="submit" class="layui-btn" lay-submit=""
					lay-filter="submitButton">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>

	<script src="<%=request.getContextPath()%>/resource/layui/layui.js"
		charset="utf-8"></script>
	
	<script>
		$.post( "<%=request.getContextPath()%>/customer/customerName", function(
				obj) {
			$.each(JSON.parse(obj), function(index, item) {
				$('#customerNameType').append(
						new Option(item.customerName, item.customerName));// 下拉菜单里添加元素，前是显示，后是值
			});
			layui.form.render("select");
		});
	</script>


	<script>
		layui
				.use(
						[ 'form', 'layedit','laydate' ],
						function() {
							var form = layui.form, layer = layui.layer, laydate = layui.laydate;

							//自定义验证规则
							form.verify({
								username : function(value) {
									if (value.length < 4) {
										return '用户名至少需要4个字符';
									} else if (value.length > 12) {
										return '用户名不能超出12个字符';
									}
								},
								pass : [ /^[\S]{4,12}$/, '密码必须4到12位，且不能出现空格' ],
								nickname : [ /^[\S]{2,16}$/,
										'昵称必须2到16位，且不能出现空格' ],
								age : function(value) {
									if (value < 0) {
										return '年龄不能小于0';
									} else if (value > 200) {
										return '年龄不能大于200';
									} else if (/^\d+$/.test(value) == false) {
										return '年龄必须是整数'
									}
								}
							});

							//监听提交
							form.on('submit(submitButton)', function(data) {
								$.post("adds",data.field, function(obj) {
									if (obj.result == 1) {
										layer.msg(obj.msg, {
											icon : 1,
											time : 2000
										});
										return false;
									} else {
										layer.msg(obj.msg, {
											icon : 2,
											time : 2000
										});
										return false;
									}
								});

								return false;
							});
							
							//日期
							laydate.render({
								elem: '#subscriptionDate'
							});
							
							laydate.render({
								elem: '#requiredDate'
							});
							
						});
	</script>


</body>
</html>